<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>vue动画</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <script src="vue.js"></script>

        <!-- 自定义两组样式，来控制 transition 内部的元素实现动画 -->
        <style>
        
            /* v-enter 【这是一个时间点】 是进入之前，元素的起始状态，此时还没有开始进入 */

            /* v-leave-to 【这是离开动画之后的时间点】 离开动画之后，离开的终止动画，此时，元素 动画已经结束了 */

            /*  */

            .fade-enter,.fade-leave-to{
                opacity: 0;
                color: greenyellow;
                transform: translate(100px);
            }
            .fade-enter-active,.fade-leave-active{
                transition: opacity 0.4s ease,transform 0.4s;
            }
            .fade-enter-to,.fade-leave{
                opacity: 1;
                color: lightblue;
                transform: translate(0);
            }
        
        </style>


    </head>
    <body>

        <div id="app">
            <a class="btn btn-primary" href="" @click.prevent="show=!show">点击执行vue动画</a>
            <transition name="fade">
                <h2 v-if="show">这是一个动画演示的h2</h2>
            </transition>
        </div>

        <script>
        
            //动画提高用户的体验，帮助用户更好的理解页面中的功能

            var vm = new Vue({
                el:"#app",
                data:{
                    show:false
                }
            });
        
        </script>
    </body>
</html>